Overview ( top )

Content Panels are full width images that sit within your media content, and fade between each other to provide readers with changing, dynamic content.

1. panel images should be at least 1000px wide: the placeholder is 1000px wide, so anything smaller will not cover the entire width of the container. Larger images (e.g. 1920 x 1080 px) will be sized to fit.
2. panels require a minimum 2 images... a primary tile (what is shown first), and an alternate tile (what replaces the primary tile. There is no limit on how many images you can have over 2.
3. panel images will display, and at the last panel image will wrap and start at 1 again.

Code

The below is an example of the code, with an explanation of each line.

<content='panel' duration='5000' rate='20' height='1080': https://sg.living.io/~template1/files/backgrounds/example_panel_background0.jpg|Web presence on demand https://sg.living.io/~template1/files/backgrounds/example_panel_background1.jpg|See the Getting Started tutorial|View Tutorial~media.cgi?topic=Getting%20Started~~~1 https://sg.living.io/~template1/files/backgrounds/example_panel_background3.jpg >

• content='panel' is mandatory. It defines that this will be an image panel.
• duration='x' is optional. It sets the time in milliseconds between each change in panel. Default is 5000, or 5 seconds.
• rate='x' is optional. It sets the time in milliseconds how quickly the fade transition occurs. Default is 20, or second to change.

Panel lines consist of up to 5 parameters, separated by | (pipe) symbols:

• image URL. Mandatory. This must point to a valid URL of a panel image.
• caption. Optional. This will display a caption box over the image showing user-defined text.
• button text. Optional. Will display a button with button text displayed on it.
• button URL. Optional. When the button is clicked by a user, this URL will be shown in the browser window.

How the example looks ( top )

Quick steps to use this feature ( top )

1. Use the example code above and preview a working baseline image panel.
2. Edit the duration time to your liking.
3. Upload additional images that you want using File Manager
4. Edit or add/remove images to your requirements. Preview regularly to ensure your code is still working.